import type { MantineProviderProps } from '@mantine/core';

const config: MantineProviderProps['theme'] = {
  scale: 1 / (37.5 / 16),
  white: '#fff',
  black: '#000',
  fontFamily: 'Inter-Regular',
  fontSmoothing: false,
  // components: {},
  radius: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '2rem',
    xl: '3rem',
  },
  shadows: {
    xs: '0 1px 2px rgba(0, 0, 0, 0.1)',
    sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
    md: '0 2px 4px rgba(0, 0, 0, 0.1)',
    lg: '0 4px 8px rgba(0, 0, 0, 0.1)',
    xl: '0 8px 16px rgba(0, 0, 0, 0.1)',
  },
  fontSizes: {
    xs: '10px',
    sm: '12px',
    md: '14px',
    lg: '16px',
    xl: '18px',
  },
  other: {
    // "2x": "@media screen and (-webkit-min-device-pixel-ratio: 2)",
    // "3x": "@media screen and (-webkit-min-device-pixel-ratio: 3)",
    // headerHeight: rem(50),
    // navHeight: rem(64),
    // pageSpacing: rem(15),
    zIndex: {
      loading: 50,
      header: 100,
      themeSwitch: 300,
      footer: 900,
      sharePopup: 999,
      toast: 99999,
    },
  },
};
export default config;
